<template>
  <div>
    <div class="catalogue">
      <div class="title">
        <i
          class="iconfont icon-xiangzuo"
           @click="$router.push({ name: 'synopsis', query: { id: id } })"
        ></i>
        <div class="cata">全部目录</div>
        <div class="xu">
          <i class="iconfont icon-daoxu" v-show="order" @click="Positive"></i>
          <i
            class="iconfont icon-zhengxu"
            v-show="!order"
            @click="Inverted"
          ></i>
        </div>
      </div>
      <ul>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <li
            v-for="(item, index) in cateContent"
            :key="item.id"
            :class="{ con: num == index }"
            @click="
              (num = index),
                $router.push({ name: 'content', query: { id: item.id } })
            "
          >
            <p>{{ item.chapter }}</p>
            <i class="iconfont icon-shuqian"></i>
          </li>
        </van-list>
      </ul>
    </div>
  </div>
</template>

<script>
import { getContent } from "../../api/content";
export default {
  data() {
    return {
      num: 0,
      list: [],
      loading: false,
      finished: false,
      order: true,
      id: null,
      cateContent: null,
    };
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },

    // 正序
    Positive() {
      this.order = false;
    },
    // 倒叙
    Inverted() {
      this.order = true;
    },
  },
  created() {
    this.$emit("getnavs-btn", false);
    this.id = localStorage.qid;
    getContent().then((data) => {
      // console.log(data);
      let index = data.data.findIndex((item) => item.id == this.id);
      this.cateContent = data.data[index].content;
      // console.log(this.cateContent);
    });
  },
};
</script>

<style lang="less">
.catalogue {
  background-color: #fff;
  .title {
    position: fixed;
    width: 100%;
    min-height: 50px;
    display: flex;
    background-color: #fff;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    i {
      font-size: 25px;
      flex: 0 0 40px;
    }
    .cata {
      flex: 1;
    }
    .xu {
      flex: 0 0 40px;
      i {
        font-size: 40px;
      }
    }
  }
  ul {
    padding: 20px;
    padding-top: 50px;
    li {
      padding: 15px 5px;
      border-bottom: 1px solid #eee;
      display: flex;
      p {
        flex: 1;
        line-height: 25px;
      }
      i {
        text-align: center;
        flex: 0 0 20px;
        font-size: 25px;
        display: none;
      }
    }
    .con {
      color: rgb(35, 179, 130);
      i {
        color: rgb(204, 4, 4);
        display: flex;
      }
    }
  }
}
</style>